<template>
  <div style="padding: 20px 10px 0 10px; font-size: 18px">
    <div class="top-title">
      <div class="top-title1">
        <div>
          <img src="@/assets/imgs/logo1.png" alt="" style="height: 50px" />
        </div>
        <div
          style="
            font-size: 30px;
            font-weight: 600;
            color: #000;
            margin-left: 30px;
          "
        >
          送货单
        </div>
        <div style="font-size: 14px">www.dongchengb2b.com</div>
      </div>
      <div class="top-title1">
        <!-- <div></div> -->
        <div>订单号：{{ formData.codeSN }}</div>
        <div>服务热线: 400-161-2988</div>
      </div>
    </div>
    <div class="top-body">
      <p style="display: flex; justify-content: space-between">
        <span>供货单位：江苏东成机电销售有限公司</span
        ><span>发货时间: {{ formData.deliveryTime }}</span>
      </p>
      <p style="display: flex; justify-content: space-between">
        <span
          >收件人：{{ formData.consignee }} {{ formData.consigneePhone }}</span
        ><span>收货单位：{{ formData.bodyName }}</span>
      </p>
      <p>
        收货地址: {{ formData.consigneeProvince }}{{ formData.consigneeCity
        }}{{ formData.consigneeCounty }}{{ formData.consigneeAddress }}
      </p>
      <p>订单联系人:{{ formData.consignee }}</p>
    </div>
    <a-table
      size="small"
      :dataSource="formData.orderDetails"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{column, text, index, record}"> </template>
      <template #footer>
        <div style="display: flex; justify-content: end">
          汇总：{{ summation() }}
        </div>
      </template>
    </a-table>
    <div style="margin-top: 20px">
      <p>温馨提示 :</p>
      <p>亲，请与运输公司当面清点签收哦~</p>
      <p>
        收货时发现异常，请务必在3个工作日内与我司客服联系，并要求运输公司当场书面核实确认，同时保留货物照片备查
      </p>
      <p>逾期未联系系统将视为完好收货哦.</p>
      <p>签收承语: <br />我已现场清点验收完毕，货物数量正确，包装完好!</p>
      <p>签收人：</p>
      <p>代收人（请签代收人名）：</p>
      <p>日期：</p>
      <p>订单创建时间：{{ formData.addTime }}</p>
      <!-- <p style="display: flex; justify-content: space-between">
        <span
          >送卸货要求:
          {{ formData.customerRemark ? formData.customerRemark : "无" }}</span
        ><span
          >快递方式：{{
            formData.orderDeliveryDto
              ? formData.orderDeliveryDto[0].deliveryType == 0
                ? "快递"
                : "托运"
              : ""
          }}</span
        >
      </p> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, computed} from "vue";
import dayjs from "dayjs";
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const formData = computed({
  get() {
    return props.data;
  },
  set() {}
});
const columns = ref<Array<any>>([
  {
    title: "序号",
    dataIndex: "num",
    align: "center",
    width: 60,
    customRender: ({index, record}) => {
      if (record.orderId) {
        return index + 1;
      }
    }
  },
  {
    title: "客户订单号",
    dataIndex: "",
    align: "center",
    width: 120,
    customRender: ({record}) => {
      return formData.value.customerOrderSN;
    }
  },
  {
    title: "客户物料号",
    dataIndex: "materialNum",
    align: "center",
    width: 120
  },
  {
    title: "客户物料描述",
    dataIndex: "materialName",
    align: "center",
    width: 180
  },
  {
    title: "商品名称",
    dataIndex: "productName",
    align: "center",
    width: 180
  },
  {
    title: "商品单位",
    dataIndex: "productUnit",
    align: "center",
    width: 150
  },
  {
    title: "商品编码",
    dataIndex: "productCode",
    align: "center",
    width: 150
  },
  {
    title: "数量",
    dataIndex: "num",
    align: "center",
    width: 68
  }
]);
const summation = () => {
  let num = 0;
  try {
    if (formData.value.orderDetails.length) {
      formData.value.orderDetails.forEach((item) => {
        num += Number(item.num);
      });
    }
  } catch {}
  return num;
};
</script>
<style lang="less" scoped>
:deep(.ant-table-thead) {
  tr {
    font-size: 12px;
    min-height: 30px;
  }

  th {
    background-color: #69d0f6 !important;
    font-size: 12px;
  }
}

.top-title {
  .top-title1 {
    display: flex;
    line-height: 50px;
    justify-content: space-between;
  }

  border-bottom: 1px solid #999;
}

.top-body {
  padding-top: 20px;
  margin-bottom: 10px;
}
</style>
